<template>
    <v-card>
        <v-row>
            <v-col style="padding:0 2px 5px 12px" cols="3">
                <VZPanel title="问题关闭率" simple iconText="mdi-finance" rounded="md">
                    <VDCountUp :endVal="closeRate" height="auto" color="#3C634E" suffix="%" decimalPlaces=2
                               @click="toProblem"></VDCountUp>
                </VZPanel>
            </v-col>
            <v-col style="padding:0 2px 5px 2px" cols="2">
                <VZPanel title="问题超期率" simple iconText="mdi-finance" rounded="md">
                    <VDCountUp :endVal="warningRate" height="auto" :color="warn_color" suffix="%" decimalPlaces=2></VDCountUp>
                </VZPanel>
            </v-col>
            <v-col style="padding:0 2px 5px 2px" cols="2">
                <VZPanel title="问题总数" simple iconText="mdi-finance" rounded="md">
                    <VDCountUp :endVal="problemCountNum" height="auto" color="#3C634E" @click="toProblem"></VDCountUp>
                </VZPanel>
            </v-col>
            <v-col style="padding:0 2px 5px 2px" cols="2">
                <VZPanel title="待办任务数" simple iconText="mdi-account-multiple-check" rounded="md">
                    <VDCountUp :endVal="waitToDoneNum" height="auto" color="#3C634E" @click="toTask"></VDCountUp>
                </VZPanel>
            </v-col>
            <v-col style="padding:0 12px 5px 2px" cols="3">
                <VZPanel title="事件待审批数" simple iconText="mdi-account-multiple-check" rounded="md">
                    <VDCountUp :endVal="eventAuditNum" height="auto" color="#3C634E" @click="toEventAudit"></VDCountUp>
                </VZPanel>
            </v-col>
        </v-row>
        <v-row style="padding-left:20px">
            <v-col style="padding:0" cols="6">
                <v-btn class="ma-1" outlined color="#8D9957" @click="loadProblemNumType('VALUE_POINT','【阈点】')">
                    <v-icon v-if="selectType == 'VALUE_POINT'">mdi-check-circle</v-icon>
                    阀点统计
                </v-btn>
                <v-btn class="ma-1" outlined color="#8D9957" @click="loadProblemNumType('DEPARTMENT','【部门】')">
                    <v-icon v-if="selectType == 'DEPARTMENT'">mdi-check-circle</v-icon>
                    部门统计
                </v-btn>
                <v-btn class="ma-1" outlined color="#8D9957" @click="loadProblemNumType('MONTH','【年度】')">
                    <v-icon v-if="selectType == 'MONTH'">mdi-check-circle</v-icon>
                    年度统计
                </v-btn>
                <v-btn class="ma-1" outlined color="#8D9957" @click="loadProblemNumType('DAY','【月度】')">
                    <v-icon v-if="selectType == 'DAY'">mdi-check-circle</v-icon>
                    月度统计
                </v-btn>
                <v-btn class="ma-1" outlined color="#8D9957" @click="loadProblemNumType('PRODUCT','【产品】')">
                    <v-icon v-if="selectType == 'PRODUCT'">mdi-check-circle</v-icon>
                    产品统计
                </v-btn>
                <!--<v-btn class="ma-1" outlined color="#8D9957" @click="loadProblemNumType('SEVERITY','【严重度】')"><v-icon v-if="selectType == 'SEVERITY'">mdi-check-circle</v-icon>严重度统计</v-btn>-->
            </v-col>
            <v-col style="padding:0" cols="6">
                <v-row align="end" align-content="end" justify=end>
                    <v-col v-if="selectType == 'MONTH'||selectType == 'DAY'" style="padding:12px 0 0 0" cols="2">
                        <v-select class="ma-1" dense :items="years" label="年份" v-model="year"></v-select>
                    </v-col>
                    <v-col v-if="selectType == 'DAY'" style="padding:12px 0 0 0" cols="2">
                        <v-select class="ma-1" dense :items="months" label="月份" v-model="month"></v-select>
                    </v-col>
                    <v-col v-if="selectType != 'MONTH' && selectType != 'DAY'" style="padding: 12px 0px 18px" cols="3">
                        <VZDatePicker v-model="dates" label="时间范围" type="daterange" ></VZDatePicker>
                    </v-col>
                    <v-col v-if="selectType == 'PRODUCT'" style="padding:12px 0 0 3px" cols="4">
                        <v-combobox dense v-model="plantCode" :items="plantItems" label="主机厂"  ></v-combobox>
                    </v-col>
                    <v-col cols="1" style="padding:0">
                        <v-tooltip top>
                            <template v-slot:activator="{ on, attrs }">
                                <v-btn v-bind="attrs"
                                       v-on="on" class="ma-1" icon color="white" @click="changeIfHidden">
                                    <v-icon>mdi-cached</v-icon>
                                </v-btn>
                            </template>
                            <span>switch</span>
                        </v-tooltip>
                    </v-col>
                </v-row>
            </v-col>



        </v-row>
        <v-row>
            <div ref="problemNumTarget" style="width:100%;height:35vh"></div>
        </v-row>
        <v-row>
            <v-col style="padding:1" span="4">
                <div ref="sourceTarget" style="width:98%;height:35vh"></div>
            </v-col>
            <v-col style="padding:1" span="4">
                <div ref="eventTarget" style="width:98%;height:35vh"></div>
            </v-col>
            <v-col style="padding:1" span="4">
                <div ref="problemTarget" style="width:98%;height:35vh"></div>
            </v-col>
        </v-row>
    </v-card>
</template>
<script>
    export default {
        data() {
            return {
                valuePointSql: "select t.VALVE_POINT_TIME as name,SUM(CASE t.severity WHEN 'A' THEN num ELSE 0 END) AS a,SUM(CASE t.severity WHEN 'B' THEN num ELSE 0 END) AS b,SUM(CASE t.severity WHEN 'C' THEN num ELSE 0 END) AS c,SUM(CASE t.severity WHEN 'D' THEN num ELSE 0 END) AS d,CASE t.VALVE_POINT_TIME WHEN 'EOP' THEN 'G9' ELSE VALVE_POINT_TIME END AS sort from (select VALVE_POINT_TIME,QUALITY_PROBLEM_SEVERITY as severity,count(1) as num from tb_quality_problem where MARK_FOR_DELETE = 0 AND VALVE_POINT_TIME IS NOT NULL [and IF_HIDDEN = #{if_hidden}] [AND PROBLEM_HAPPEN_DATE <= #{etime}] [and PROBLEM_HAPPEN_DATE >= #{btime}]  group by VALVE_POINT_TIME,QUALITY_PROBLEM_SEVERITY) t group by t.VALVE_POINT_TIME order by sort",
                departmentSql: "select t.CHARGE_PERSON_DEPT as name,SUM(CASE t.severity WHEN 'A' THEN num ELSE 0 END) AS a,SUM(CASE t.severity WHEN 'B' THEN num ELSE 0 END) AS b,SUM(CASE t.severity WHEN 'C' THEN num ELSE 0 END) AS c,SUM(CASE t.severity WHEN 'D' THEN num ELSE 0 END) AS d from (select CHARGE_PERSON_DEPT,QUALITY_PROBLEM_SEVERITY as severity,count(1) as num from tb_quality_problem where MARK_FOR_DELETE = 0 and CHARGE_PERSON_DEPT is not null [and IF_HIDDEN = #{if_hidden}] [AND PROBLEM_HAPPEN_DATE <= #{etime}] [and PROBLEM_HAPPEN_DATE >= #{btime}] group by CHARGE_PERSON_DEPT,QUALITY_PROBLEM_SEVERITY) t group by t.CHARGE_PERSON_DEPT",
                monthSql: "select t.YEAR as name,SUM(CASE t.severity WHEN 'A' THEN num ELSE 0 END) AS a,SUM(CASE t.severity WHEN 'B' THEN num ELSE 0 END) AS b,SUM(CASE t.severity WHEN 'C' THEN num ELSE 0 END) AS c,SUM(CASE t.severity WHEN 'D' THEN num ELSE 0 END) AS d from (select LEFT(PROBLEM_HAPPEN_DATE,7) as YEAR,QUALITY_PROBLEM_SEVERITY as severity,count(1) as num from tb_quality_problem where MARK_FOR_DELETE = 0 [and IF_HIDDEN = #{if_hidden}] [and LEFT(PROBLEM_HAPPEN_DATE,4) = #{year_data}] group by LEFT(PROBLEM_HAPPEN_DATE,7),QUALITY_PROBLEM_SEVERITY) t group by t.YEAR order by t.YEAR",
                daySql: "select t.PROBLEM_HAPPEN_DATE as name,SUM(CASE t.severity WHEN 'A' THEN num ELSE 0 END) AS a,SUM(CASE t.severity WHEN 'B' THEN num ELSE 0 END) AS b,SUM(CASE t.severity WHEN 'C' THEN num ELSE 0 END) AS c,SUM(CASE t.severity WHEN 'D' THEN num ELSE 0 END) AS d from (select PROBLEM_HAPPEN_DATE,QUALITY_PROBLEM_SEVERITY as severity,count(1) as num from tb_quality_problem where MARK_FOR_DELETE = 0 [and IF_HIDDEN = #{if_hidden}] [and LEFT(PROBLEM_HAPPEN_DATE,7) = #{month_data}] group by PROBLEM_HAPPEN_DATE,QUALITY_PROBLEM_SEVERITY) t group by t.PROBLEM_HAPPEN_DATE order by t.PROBLEM_HAPPEN_DATE",
                productSql: "SELECT " +
                    " t.PRODUCT_NAME AS NAME, " +
                    " SUM( CASE t.severity WHEN 'A' THEN num ELSE 0 END ) AS a, " +
                    " SUM( CASE t.severity WHEN 'B' THEN num ELSE 0 END ) AS b, " +
                    " SUM( CASE t.severity WHEN 'C' THEN num ELSE 0 END ) AS c, " +
                    " SUM( CASE t.severity WHEN 'D' THEN num ELSE 0 END ) AS d  " +
                    "FROM " +
                    " ( " +
                    "   SELECT " +
                    "    a.PRODUCT_NAME, " +
                    "    a.QUALITY_PROBLEM_SEVERITY AS severity, " +
                    "    count( 1 ) AS num  " +
                    "   FROM " +
                    "    tb_quality_problem a  " +
                    "   LEFT JOIN (SELECT * FROM tb_standard_assembly_product GROUP BY ASSEMBLY_CODE) b ON a.PRODUCT_CODE = b.ASSEMBLY_CODE " +
                    "   WHERE " +
                    "   a.MARK_FOR_DELETE = 0 [and IF_HIDDEN = #{if_hidden}] [AND a.PROBLEM_HAPPEN_DATE <= #{etime}] [and a.PROBLEM_HAPPEN_DATE >= #{btime}] AND a.PRODUCT_NAME IS NOT NULL AND a.PRODUCT_NAME != '' [ and b.ENGINE_PLANT_CODE = #{engine_plant_code}] " +
                    "   group by a.PRODUCT_CODE,a.QUALITY_PROBLEM_SEVERITY  " +
                    " ) t group by t.PRODUCT_NAME;",
                /*severitySql:'select QUALITY_PROBLEM_SEVERITY as name,count(1) as num,(select count(1) as num from tb_quality_problem where MARK_FOR_DELETE = 0 [and IF_HIDDEN = #{if_hidden}]) as count_num  from tb_quality_problem where MARK_FOR_DELETE = 0 and QUALITY_PROBLEM_SEVERITY is not null [and if_hidden = #{if_hidden}] group by QUALITY_PROBLEM_SEVERITY order by QUALITY_PROBLEM_SEVERITY',*/
                nameList: [],
                numList: [],
                currentSql: "select t.VALVE_POINT_TIME as name,SUM(CASE t.severity WHEN 'A' THEN num ELSE 0 END) AS a,SUM(CASE t.severity WHEN 'B' THEN num ELSE 0 END) AS b,SUM(CASE t.severity WHEN 'C' THEN num ELSE 0 END) AS c,SUM(CASE t.severity WHEN 'D' THEN num ELSE 0 END) AS d,CASE t.VALVE_POINT_TIME WHEN 'EOP' THEN 'G9' ELSE VALVE_POINT_TIME END AS sort from (select VALVE_POINT_TIME,QUALITY_PROBLEM_SEVERITY as severity,count(1) as num from tb_quality_problem where MARK_FOR_DELETE = 0 AND VALVE_POINT_TIME IS NOT NULL [and IF_HIDDEN = #{if_hidden}] [AND PROBLEM_HAPPEN_DATE <= #{etime}] [and PROBLEM_HAPPEN_DATE >= #{btime}] group by VALVE_POINT_TIME,QUALITY_PROBLEM_SEVERITY) t group by t.VALVE_POINT_TIME order by sort",
                if_hidden: 'N',
                engine_plant_code: '',
                sourceRateData: [],
                eventRateData: [],
                problemRateData: [],
                problem_source: '',
                event_type: '',
                problem_source_name: '',
                event_type_name: '',
                showDataZoom: false,
                problemNumTypeName: '【阀点】',
                rotate: 0,
                problemCountNum: 0,
                closeRate: 0,
                warningRate: 0,
                waitToDoneNum: 0,
                eventAuditNum: 0,
                intervalId: null,
                selectType: 'VALUE_POINT',
                seriesList: [],
                years: [],
                year: new Date().getFullYear(),
                month: new Date().getMonth() + 1,
                months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                dates:['2024-01-01',new Date().getFullYear()+'-12-31'],
                plantItems:[],
                plantCode:'',
            }
        },
        methods: {
            toProblem() {
                this.$router.push({path:'/vpg/1b6b203e0f1646e1b42f0e9571ed78ec',params:{}})
                /*this.$emit('toPage', '1b6b203e0f1646e1b42f0e9571ed78ec', {});*/
            },
            toTask() {
                this.$router.push({path:'/vpg/e68652d593c5402894e82a9391090c25',params:{}})
                /*this.$emit('toPage', 'e68652d593c5402894e82a9391090c25', {});*/
            },
            toEventAudit() {
                this.$router.push({path:'/vpg/va568825cfd4bcc8826316c7395',params:{}})
                /*this.$emit('toPage', 'va568825cfd4bcc8826316c7395', {});*/
            },
            changeIfHidden() {
                if (this.if_hidden == 'N') {
                    this.if_hidden = '';
                } else {
                    this.if_hidden = 'N';
                }
                this.loadAllData();
            },
            runSource() {
                this.chartSource = this.chartSource || this.$echarts.init(this.$refs.sourceTarget)
                let option = {
                    title: {
                        text: 'HV内外部问题占比',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    /*legend: {
                      top: '5%',
                      left: 'center',
                    },*/
                    series: [
                        {
                            name: 'HV内外部问题占比',
                            type: 'pie',
                            radius: ['30%', '70%'],
                            selectedMode: 'single',
                            selectedOffset: 8,
                            select: {
                                labelLine: {},
                                itemStyle: {}
                            },
                            top: '18',
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 8,
                                borderColor: '#fff',
                                borderWidth: 2
                            },

                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 16,
                                    fontWeight: 'bold'
                                }
                            },
                            label: {
                                show: true,
                                formatter: '{b}:{c} {d}%',
                            },
                            labelLine: {
                                show: true
                            },
                            data: this.sourceRateData
                        }
                    ]
                }
                let _this = this;
                option && this.chartSource.setOption(option);
                this.chartSource.on('click', function (params) {
                    _this.problem_source = params.data.code;
                    _this.problem_source_name = '【' + params.data.name + '】';
                    _this.loadEventData();
                    _this.loadProblemData();
                });
            },
            runEvent() {
                this.chartEvent = this.chartEvent || this.$echarts.init(this.$refs.eventTarget)
                let option = {
                    title: {
                        text: this.problem_source_name + '事件占比',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    /*legend: {
                      top: '5%',
                      left: 'center',
                    },*/
                    series: [
                        {
                            name: this.problem_source_name + '事件占比',
                            type: 'pie',
                            radius: ['30%', '70%'],
                            selectedMode: 'single',
                            selectedOffset: 8,
                            top: '18',
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 8,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 16,
                                    fontWeight: 'bold'
                                }
                            },
                            label: {
                                show: true,
                                formatter: '{b}:{c} {d}%',
                            },
                            labelLine: {
                                show: true
                            },
                            data: this.eventRateData
                        }
                    ]
                }
                let _this = this;
                option && this.chartEvent.setOption(option);
                this.chartEvent.on('click', function (params) {
                    _this.event_type = params.data.code;
                    _this.event_type_name = '【' + params.data.name + '】';
                    _this.loadProblemData();
                });
            },
            runProblem() {
                this.chartProblem = this.chartProblem || this.$echarts.init(this.$refs.problemTarget)
                let option = {
                    title: {
                        text: this.problem_source_name + this.event_type_name + '问题占比',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    /*legend: {
                      top: '5%',
                      left: 'center',
                    },*/
                    series: [
                        {
                            name: this.problem_source_name + this.event_type_name + '问题占比',
                            type: 'pie',
                            radius: ['30%', '70%'],
                            selectedMode: 'single',
                            selectedOffset: 8,
                            top: '18',
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 8,
                                borderColor: '#fff',
                                borderWidth: 2
                            },

                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 16,
                                    fontWeight: 'bold'
                                }
                            },
                            label: {
                                show: true,
                                formatter: '{b}:{c} {d}%',
                            },
                            labelLine: {
                                show: true
                            },
                            data: this.problemRateData
                        }
                    ]
                }
                option && this.chartProblem.setOption(option);
            },
            runProblemNum() {
                this.chartProblemNumTarget = this.chartProblemNumTarget || this.$echarts.init(this.$refs.problemNumTarget)
                let option = {
                    // color: ['#D32F2F', '#FBC02D', '#388E3C', '#1976D2'],
                    color: ['#1976D2', '#388E3C', '#FBC02D', '#D32F2F'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {right: '5%', data: ['A', 'B', 'C', 'D']},
                    title: {
                        text: this.problemNumTypeName + '问题严重度数量统计',
                        /*subtext:'问题总数：'+this.problemCountNum,*/

                        left: 'center'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',

                        containLabel: true
                    },
                    toolbox: {
                        show: false,
                        right: '3%',
                        feature: {
                            magicType: {
                                type: ["line", "bar"]
                            },
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                show: false
                            },

                            axisLabel: {    //重点在这一块，其余可以忽略
                                interval: 0,   //这个一定要有，别忘记了
                                rotate: this.rotate,
                                textStyle: {
                                    fontSize: 10
                                }
                            },
                            data: this.nameList
                        },
                    ],
                    dataZoom: [
                        {
                            show: this.showDataZoom,
                            realtime: true,
                            start: 0,
                            end: 100,
                            xAxisIndex: [0, 1]
                        },
                        {
                            type: 'inside',
                            realtime: true,
                            start: 0,
                            end: 100,
                            xAxisIndex: [0, 1]
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '数量',
                            axisLabel: {
                                formatter: '{value} 个'
                            }
                        },
                    ],
                    series: this.seriesList.sort().reverse() // 数据倒序
                }
                let _this = this;
                option && this.chartProblemNumTarget.setOption(option);
                this.chartProblemNumTarget.on('click', function (params) {
                    console.log(params);
                    _this.clickBarShowProblemInfo(params);
                });
            },
            clickBarShowProblemInfo(params) {
                let name = params.name;
                let seriesName = params.seriesName;
                if (this.selectType == 'VALUE_POINT') {
                    let code = '';
                    let entryList = app.utils.getEntrys('VALVE_POINT_TIME');

                    entryList.forEach((item) => {
                        if (item.name == name) {
                            code = item.code;
                        }
                    })
                    this.$emit('toPage', 'va2d3f193314a27ab528d0e5c08', {
                        valve_point_time: code,
                        if_hidden: this.if_hidden,
                        btime: this.btime,
                        etime: this.etime
                    })
                } else if (this.selectType == 'DEPARTMENT') {
                    this.$emit('toPage', 'va2d3f193314a27ab528d0e5c08', {
                        charge_person_dept: name,
                        if_hidden: this.if_hidden,
                        btime: this.btime,
                        etime: this.etime
                    })
                } else if (this.selectType == 'MONTH') {
                    this.$emit('toPage', 'va2d3f193314a27ab528d0e5c08', {happen_month: "'" + name + "'", if_hidden: this.if_hidden})
                } else if (this.selectType == 'DAY') {
                    this.$emit('toPage', 'va2d3f193314a27ab528d0e5c08', {problem_happen_date: name, if_hidden: this.if_hidden})
                } else if (this.selectType == 'PRODUCT') {
                    this.$emit('toPage', 'va2d3f193314a27ab528d0e5c08', {
                        product_name: name,
                        if_hidden: this.if_hidden,
                        btime: this.btime,
                        etime: this.etime
                    })
                }

            },

            loadProblemNumType(type, problemNumTypeName) {
                this.problemNumTypeName = problemNumTypeName;
                this.selectType = type;
                if (type == 'VALUE_POINT') {
                    this.currentSql = this.valuePointSql;
                } else if (type == 'DEPARTMENT') {
                    this.currentSql = this.departmentSql;
                } else if (type == 'MONTH') {
                    this.currentSql = this.monthSql;
                } else if (type == 'DAY') {
                    this.currentSql = this.daySql;
                } else if (type == 'PRODUCT') {
                    this.currentSql = this.productSql;
                }
                /*else if(type == 'SEVERITY'){
                  this.currentSql = this.severitySql;
                }*/
                this.loadProblemNumData();

            },
            loadProblemNumData() {
                let _this = this;
                this.nameList = [];
                this.seriesList = [];
                //问题数量统计
                let params = {"SQL": this.currentSql};
                app.utils.ajaxRequest({
                    hideMsg: true,
                    hideMask: true,
                    url: app.path().dispose + "?functionCode=QMS_PROBLEM_NUM_REPORT",
                    params: {
                        "queryCondition[if_hidden]": _this.if_hidden,
                        "queryCondition[year_data]": _this.year,
                        "queryCondition[month_data]": _this.year_month,
                        "queryCondition[btime]": _this.btime,
                        "queryCondition[etime]": _this.etime,
                        "queryCondition[engine_plant_code]": _this.plantCode.value,
                        functionParam: JSON.stringify(params)
                    },
                    callBack(res) {
                        if (res.success && res.rows.length > 0) {
                            console.log(res.rows);
                            let dataList = res.rows;
                            if (dataList.length > 15) {
                                _this.showDataZoom = true;
                                _this.rotate = 10;
                            } else {
                                _this.showDataZoom = false;
                                _this.rotate = 0
                            }
                            let aData = [];
                            let bData = [];
                            let cData = [];
                            let dData = [];
                            let nameList = [];
                            dataList.forEach((item) => {
                                item.name = app.utils.getEntryValue("VALVE_POINT_TIME", item.name)
                                nameList.push(item.name);
                                aData.push(item.a);
                                bData.push(item.b);
                                cData.push(item.c);
                                dData.push(item.d);
                            })
                            let rawData = [aData, bData, cData, dData];
                            const seriesList = ['A', 'B', 'C', 'D',].map((name, sid) => {
                                return {
                                    name,
                                    type: 'bar',
                                    stack: 'total',
                                    barMaxWidth: 60,
                                    barMinWidth: 40,
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    itemStyle: {
                                        normal: {
                                            barBorderRadius: [3, 3, 3, 3],
                                            label: {
                                                show: true,
                                                formatter: (params) => params.value == 0 ? '' : params.value
                                            },
                                        }
                                    },
                                    data: rawData[sid]
                                };
                            });
                            _this.nameList = nameList;
                            _this.seriesList = seriesList;
                        }
                        _this.runProblemNum();
                    },
                })
            },
            loadSourceData() {
                let _this = this
                _this.sourceRateData = [];
                app.utils.ajaxRequest({
                    hideMsg: true,
                    hideMask: true,
                    url: app.path().dispose + "?functionCode=QMS_QUALITY_PROBLEM_IN_OUT_RATE",
                    params: {
                        "queryCondition[if_hidden]": _this.if_hidden,
                        "queryCondition[btime]": _this.btime,
                        "queryCondition[etime]": _this.etime
                    },
                    callBack(res) {
                        if (res.success && res.rows.length > 0) {
                            let dataList = res.rows;
                            dataList.forEach((item) => {
                                item.code = item.name;
                                item.name = app.utils.getEntryValue("QUALITY_PROBLEM_SOURCE", item.name)
                            })
                            _this.sourceRateData = dataList;

                        }
                        _this.runSource()
                    },
                })
            },
            loadEventData() {
                let _this = this;
                _this.eventRateData = [];
                app.utils.ajaxRequest({
                    hideMsg: true,
                    hideMask: true,
                    url: app.path().dispose + "?functionCode=QMS_QUALITY_EVENT_TYPE_RATE",
                    params: {
                        "queryCondition[if_hidden]": _this.if_hidden,
                        "queryCondition[btime]": _this.btime,
                        "queryCondition[etime]": _this.etime,
                        "queryCondition[problem_source]": _this.problem_source
                    },
                    callBack(res) {
                        if (res.success && res.rows.length > 0) {
                            let dataList = res.rows;
                            dataList.forEach((item) => {
                                item.code = item.name;
                                item.name = app.utils.getEntryValue("QUALITY_EVENT_TYPE", item.name)
                            })
                            _this.eventRateData = dataList;

                        }
                        _this.runEvent()
                    },
                })
            },
            loadProblemData() {
                let _this = this
                _this.problemRateData = [];
                app.utils.ajaxRequest({
                    hideMsg: true,
                    hideMask: true,
                    url: app.path().dispose + "?functionCode=QMS_QUALITY_PROBLEM_TYPE_RATIO_REPORT",
                    params: {
                        "queryCondition[if_hidden]": _this.if_hidden,
                        "queryCondition[problem_source]": _this.problem_source,
                        "queryCondition[btime]": _this.btime,
                        "queryCondition[etime]": _this.etime,
                        "queryCondition[event_type]": _this.event_type
                    },
                    callBack(res) {
                        if (res.success && res.rows.length > 0) {
                            let dataList = res.rows;
                            dataList.forEach((item) => {
                                item.code = item.name;
                                item.name = app.utils.getEntryValue("QUALITY_PROBLEM_TYPE", item.name)
                            })
                            _this.problemRateData = dataList;
                        }
                        _this.runProblem()
                    },
                })
            },
            loadTopNum() {
                let _this = this;
                app.utils.ajaxRequest({
                    hideMsg: true,
                    hideMask: true,
                    url: app.path().dispose + "?functionCode=QMS_HOME_TOP_REPORT_SHOW",
                    params: {
                        "queryCondition[if_hidden]": _this.if_hidden,
                        "queryCondition[btime]": _this.btime,
                        "queryCondition[etime]": _this.etime,
                        "queryCondition[user_id]": app.user().user.id
                    },
                    callBack(res) {
                        if (res.success && res.rows.length > 0) {
                            let data = res.rows[0];
                            _this.closeRate = data.close_rate;
                            _this.warningRate = data.warning_rate;
                            _this.eventAuditNum = data.event_audit_num;
                            _this.problemCountNum = data.problem_count_num;
                        }
                    },
                })
            },
            loadTaskNum() {
                let _this = this;
                app.utils.ajaxRequest({
                    hideMsg: true,
                    hideMask: true,
                    url: app.path().dispose + "?functionCode=QMS_RUN_TASK_LIST",
                    params: {"rows": 10, "offset": 0, "limit": 5, "page": 1},
                    callBack(res) {
                        console.log(res);
                        if (res.success) {
                            _this.waitToDoneNum = res.total;
                        }
                    },
                })
            },
            loadAllData() {
                this.loadTopNum();
                this.loadTaskNum();
                this.loadProblemNumData();
                this.loadSourceData();
                this.loadEventData();
                this.loadProblemData();
            },
            loadPlantData() {
                let _this = this;
                _this.plantItems = [];
                app.utils.ajaxRequest({
                    hideMsg: true,
                    hideMask: true,
                    url: app.path().dispose + "?functionCode=QMS_MAIN_ENGINE_PLANT_SELECT",
                    params: {is_queryPage: false},
                    callBack(res) {
                        if (res.success && res.rows.length > 0) {
                            let dataList = res.rows;
                            let plantList = [];
                            dataList.forEach((item) => {
                                let map = {};
                                map.text = item.main_engine_plant_name;
                                map.value = item.main_engine_plant_code;
                                map.id = item.id;
                                plantList.push(map);
                            })
                            _this.plantItems = plantList;
                        }
                    },
                })
            },
        },
        created() {
            const year = new Date().getFullYear()
            const endYear = year;
            const diff = year - 2024;
            for (let i = year - 4 - diff; i <= endYear; i++) {
                this.years.push(i)
            }
        },
        computed: {
            warn_color: function () {
                if (this.warningRate > 75) {
                    return 'red';
                } else if (this.warningRate > 50) {
                    return 'yellow';
                } else if (this.warningRate > 25) {
                    return 'blue';
                } else {
                    return '#3C634E';
                }
            },
            current_year: function () {
                return "【" + this.year + '年】';
            },
            year_month: function () {
                return this.year + '-' + String(this.month).padStart(2, '0');
            },
            current_month: function () {
                if (this.selectType == "DAY") {
                    return "【" + this.month + '月】';
                } else {
                    return "";
                }
            },
            btime: function () {
                if (this.dates != '' && this.dates.length > 0) {
                    return this.dates[0];
                } else {
                    return "";
                }
            },
            etime: function () {
                if (this.dates != '' && this.dates.length > 0) {
                    return this.dates[1];
                } else {
                    return "";
                }
            },
        },
        watch: {
            month(newValue, oldValue) {
                if (newValue != undefined && newValue != '') {
                    this.loadAllData();
                }
            },
            year(newValue) {
                if (newValue != undefined && newValue != '') {
                    this.loadAllData();
                }
            },
            dates(newValue, oldValue) {
                this.loadAllData();

            },
            plantCode(newValue, oldValue) {
                this.loadAllData();

            },
        },
        mounted() {
            this.loadPlantData();
            this.loadAllData();
            let _this = this;
            this.intervalId = setInterval(function () {
                _this.loadAllData();
            }, 1000 * 60);
            window.onresize=()=>{
                this.chartSource.resize();
                this.chartEvent.resize();
                this.chartProblem.resize();
                this.chartProblemNumTarget.resize();
            }
        },
        beforeDestroy() {
            clearInterval(this.intervalId);
        }

    }
</script>
